<template>
	<view class="myContent">
		<view class="header">
			<image width="100%" height="100%" class="headbgImage" ></image>
			<image width="100%" height="100%" round class="myPhoto" :src=login_photo></image>
			<image width="100%" height="100%" round class="myPhoto1" src="/static/setting.png" @click="setting"></image>
			<text class="myInformation">{{name}}</text>
		</view>
		<view class="middle-num">
			<view class="oner">
				<view class="zi">
					<text class="zier">{{coupon}}<text class="zisan"></text></text>
					<text class="quan">购物车</text>
				</view>
			</view>
			<view class="three">
				<view class="zi">
					<text class="zier">{{integral}}\n</text>
					<text class="quan">红包</text>
				</view>
			</view>
			<view class="three">
				<view class="zi">
					<text class="zier">{{integral}}\n</text>
					<text class="quan">账单</text>
				</view>
			</view>
		</view>
		<view class="page">
		<view class="mydingdan">
			<view style="display: flex;">
				<div style="margin-left: 10px; margin-top: 12px;">我的订单</div>
				<view style="margin-left: 200px; margin-top: 12px; font-size: 20px;" @click="my_order"> > </view>
			</view>
			<view class="myorder-container" @click="my_order">
				<view class="myorder">
					<view v-if="if_login">{{AllOrder.num1}}</view>
					<view v-else>0</view>
					<view style="margin-top: 15px;">全部</view>
				</view>
				<view class="myorder">
					<view v-if="if_login">{{AllOrder.num2}}</view>
					<view v-else>0</view>
					<view style="margin-top: 15px;">已预定</view>
				</view>
				<view class="myorder">
					<view v-if="if_login">{{AllOrder.num3}}</view>
					<view v-else>0</view>
					<view style="margin-top: 15px;">已完成</view>
				</view>
				<view class="myorder">
					<view v-if="if_login">{{AllOrder.num4}}</view>
					<view v-else>0</view>
					<view style="margin-top: 15px;">退款</view>
				</view>
			</view>
		</view>
		<view class="liebiao">
			<view>推荐工具</view>
			<view v-if="init_role==1">
				<view class="tools-container">
					<view class="tool" v-for="(item, index) in menus" :key="index" @click="navigateTo(item.link)">
						<image :src="item.url" class="tool-image"></image>
						<view class="tool-url">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view v-else-if="init_role==2" class="tools-container">
				<view class="tool" v-for="(item, index) in shop_menus" :key="index" @click="navigateTo(item.link)">
					<image :src="item.url" class="tool-image"></image>
					<view class="tool-url">{{ item.name }}</view>
				</view>
			</view>
			<button style="background-color: #ffffff;margin-top: 10px;color: #0055ff;" @click="outapp">{{out}}</button>
		</view>
		</view>
		<bottom-nav></bottom-nav>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				init_role: 1,
			    mytoken:{
					"token":'',
				},	
				AllOrder:{
				},
				GetMyInfo:{
				
				},
				if_login:'',
				name: "未登录",
				out: "退出登录",
				login_photo: '../../static/not_login.png',
				coupon: 6,
				integral: 10,
				menus: [{
						name: '客服中心',
						url: '../../static/service.png',
						link: '/pages/tool/service'
					},

					{
						name: '商家入驻',
						url: '../../static/shop_inner.png',
						link: '/pages/tool/shop_inner'
					},
					{
						name: '优惠券',
						url: '../../static/cheap_tricket.png',
						link: '/pages/tool/cheap_tricket'
					},
					{
						name: '我的投诉',
						url: '../../static/complaint.png',
						link: '/pages/tool/complaint'
					},

				],
				shop_menus: [{
						name: '客服中心',
						url: '../../static/service.png',
						link: '/pages/tool/service'
					},
					{
						name: '名宿管理',
						url: '../../static/house.png',
						link: '/pages/tool/mylove'
					},
					{
						name: '平台管理',
						url: '../../static/manager.png',
						link: '/pages/tool/shop_inner'
					},
					{
						name: '上传资质',
						url: '../../static/upload.png',
						link: '/pages/tool/cheap_tricket'
					},
					8

				]
			}
		},
		 onShow() { 
			 //没次回到页面都会调用下拉刷新
			  uni.startPullDownRefresh();
		  },
		mounted() {
			var loginUser = uni.getStorageSync('login-user').userId;
			var loginRole = uni.getStorageSync('login-role');
			console.log(loginRole);
			var gettoken=uni.getStorageSync('login-user').token;
			var new_url;
			if(loginRole==1)
			new_url='http://192.168.2.226:8086/business/user/getinfo',
			this.init_role=1;
			else if(loginRole==2)
			new_url='http://192.168.2.226:8086/business/seller/getinfo',
			this.init_role=2;
            console.log(new_url);
			if (loginUser) {
				console.log("已经登陆了");
				this.if_login=true;
				this.name=uni.getStorageSync('login-user').userName;
				console.log(this.if_login)
			} else {
				console.log("未登陆");
				this.out = "登录/注册";
			}
			this.mytoken.token=uni.getStorageSync('login-user').token;
			this.getorder();
			this.get_user_info(new_url);
			
		},
		methods: {
			my_order() {
				
				if(this.mytoken.token)
				this.$router.push('/pages/order/order')
				else
				uni.showToast({
					icon:'error',
					title:'请先登录',
					duration:2000
				})
				
			},
			setting() {
				if(this.mytoken.token)
				this.$router.push('/pages/setting/setting')
				else
				uni.showToast({
					icon:'error',
					title:'请先登录',
					duration:2000
				})
			},
			navigateTo(link) {
				if(this.mytoken.token)
				this.$router.push(link);
				else
				uni.showToast({
					icon:'error',
					title:'请先登录',
					duration:2000
				})
			},
			outapp() {
				var login = uni.getStorageSync('login-user')
				if (login) {
					uni.clearStorageSync()
				}
				uni.redirectTo({
					url: "/pages/login/Login"
				})
			},
			
			getorder(){
				uni.request({
					url:'http://192.168.2.226:8086/business/user/myOrder',
					method:'GET',
					header:{
						"token":this.mytoken.token,
					},
					success:(res)=>{
						console.log(res.data.data);
						this.AllOrder=res.data.data;
					},
					fail(){
						
					},
				})
			},
			
			get_user_info(new_url){
				console.log(new_url);
				uni.request({
				 	url:new_url,
				 	method:'GET',
					header: {
					        'token': this.mytoken.token // 在这里设置请求头
					    },
					
				 	// 返回成功的结果
				 	success:(res) =>{
						this.name=res.data.data.username;
						let MyPhoto=res.data.data.photo;
						this.login_photo='http://192.168.2.226:8086/business/common2/download?name='+encodeURIComponent(MyPhoto) ;
					},
				 	fail:(error) => {
				 		console.log("获取失败")
				 	},
				 })
				
			}

		},
	}
</script>

<style scoped>
	.page {
		background: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.header {
		flex-direction: row;
		display: flex;
		height: 200rpx;
	}

	.headbgImage {
		height: 25%;
		width: 100%;
		position: absolute;
		z-index: 1;
		background-color: rgba(82,144,255,1);
	}

	.myPhoto {
		height: 120rpx;
		width: 130rpx;
		position: absolute;
		z-index: 2;
		margin-left: 3%;
		margin-top: 3%;
	}

	.myPhoto1 {
		height: 50rpx;
		width: 50rpx;
		z-index: 2;

		margin-left: 85%;
		margin-top: 20px;

	}

	.myInformation {
		position: absolute;
		z-index: 2;
		margin-left: 25%;
		margin-top: 9%;
	}

	.middle-num {
		position: absolute;
		z-index: 2;
		display: flex;
		flex-wrap: nowrap;
		background: white;
		width: 95%;
		margin-left: 20rpx;
		height: 160rpx;
		border-radius: 10px;
		margin-top: -50rpx;
	}

	.oner {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.twoer {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #eaeaea;
	}

	.three {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.zier {
		font-size: 48rpx;
		color: #333333;
	}

	.zisan {
		font-size: 24rpx;
		color: #333333;
	}

	.quan {
		font-size: 24rpx;
		color: #999999;
	}

	.zi {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mydingdan {
		display: flex;
		flex-wrap: nowrap;
		background: #fff;
		width: 95%;
		height: 250rpx;
		margin-left: 20rpx;
		border-radius: 10px;
		margin-top: 110rpx;
		flex-direction: column;
	}




	.liebiao {
		height: 658rpx;
		align-items: center;
		flex-wrap: nowrap;
		background: #fff;
		width: 91%;
		border-radius: 10px;
		flex-direction: column;
		padding: 2%;
		margin: 20rpx 20rpx 10rpx 20rpx;
	}

	.myorder-container {
		display: flex;
		justify-content: space-around;
		margin-top: 0px;
		/* 或者 space-between, center 等 */
	}

	.myorder {
		height: 80px;
		/* 边框仅用于展示容器范围 */
		/* 		 border: 1px solid #ddd; */
		width: 80px;
		margin: 10px;

	}


	.tool {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px;
		width: 25%;
		height: 70px;
	}

	.tools-container {
		display: flex;
		flex-wrap: wrap;
	}

	.tool-image {
		width: 30px;
		height: 30px;
	}
</style>